<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=EDGE" charset=UTF-8/>
		<link rel="stylesheet" type="text/css" href="resources/styles/GeneralStyle.css"/>
		<link rel="stylesheet" type="text/css" href="resources/styles/TabpageStyle.css"/>
		<link rel="stylesheet" type="text/css" href="resources/styles/menuStyle.css"/>
		<title>BCF - Reuse Components</title>
		<script id="sap-ui-bootstrap"
	  		data-sap-ui-theme="sap_ux"
      		type="text/javascript"
       		data-sap-ui-libs="sap.ui.commons"
      		src="resources/sap-ui-core.js">
    	</script > 
		<script src="resources/JavaScript/common.js"></script>
		<script src="resources/JavaScript/utils.js"></script>
		<script src="resources/JavaScript/sorttable.js"></script>
		<script type="text/javascript">
		
		var oldTabId = null;
		var selectedOutput = null;
		var selectedReuseMode = null;
		var selectedComponent = null;
		var firstSelectedOutput = null;

		var oldFromRange = 0;
		var htmlTabSearch = [];
		var htmlTabResult = [];
		var reuseCaseData = [];
		var reuseValueData = [];
		var reuseMethodData = [];
		var reuseCriterionData = [];
		var htmlDetailTab = {};
		var globalReq = getXmlHttpRequestObject();

		function selectTab(srcElement)
		{
			if(oldTabId != null)
				document.getElementById("current").id = oldTabId;
			
			oldTabId = srcElement.id;
			srcElement.id = "current";
		}
		
		function importComponent()
		{
			if(selectedReuseMode != null)
			{
				var cmp = (selectedOutput == "VALUE") ? selectedComponent.value : selectedComponent.component;
				cmp["reuseMode"] = selectedReuseMode;
				
				if(selectedReuseMode != "LINK")
					cmp.ID = generateID();
				
				window.returnValue = cmp;
				window.close();	
			}
			else
				showErrorMessage("Please select a reuse mode from the reuse tab.", "Validation Error: Reuse Mode Not Selected");
		}
		
		function createHtmlTabResult(resultData, cmpType)
		{
			var tab = null;
			var columnsLabels = (cmpType != "VALUE") ? ["Reuse", cmpType, "Last Updated", "Business Case", "Popularity"] : ["Reuse", "Criterion", "Case", "Method", "Value", "Business Case"];
			
			function rbClicked_JSEvent(){ rbClicked(arguments[0].srcElement); }
			function rowCountChanged_JSEvent(){ rowCountChanged(arguments[0].srcElement); }
			function rowCountRangeChanged_JSEvent(){ rowCountRangeChanged(arguments[0].srcElement); }
			function componentSelected_JSEvent(){ componentSelected(arguments[0].srcElement); }
			function goNextPage(){changeWindow("reuse");}
			function goPreviousPage(){changeWindow("search");}
			function showComponentDetails(){ requestComponentDetails(JSON.parse(arguments[0].srcElement.id), cmpType); }
			function showBcDetails(){ requestComponentDetails(JSON.parse(arguments[0].srcElement.id), "BUSINESS_CASE"); }
			function showCriterionDetails(){ requestComponentDetails(JSON.parse(arguments[0].srcElement.id), "CRITERION"); }
			function showCaseDetails(){ requestComponentDetails(JSON.parse(arguments[0].srcElement.id), "CASE"); }
			function showMethodDetails(){ requestComponentDetails(JSON.parse(arguments[0].srcElement.id), "METHOD"); }
			function showValueDetails(){ requestComponentDetails(JSON.parse(arguments[0].srcElement.id), "VALUE"); }
			
			function requestComponentDetails(cmp, cmpType)
			{
				var legend = document.createElement("legend");
				legend.innerHTML = cmpType + " Details";
				var htmlTabDetails = [legend];
				
				function changeWindow_JSEvent(){ changeWindow(arguments[0].srcElement.id); }					
				
				for(var prop in cmp)
				{
					var divFieldName = document.createElement("div");
					divFieldName.setAttribute("class", "inputFieldName");
					var lbFieldName = document.createElement("label");
					lbFieldName.innerHTML = prop + ": ";
					divFieldName.appendChild(lbFieldName);
					
					var divFieldValue = document.createElement("div");
					divFieldValue.setAttribute("class", "inputField");
					var lbFieldValue = document.createElement("label");
					lbFieldValue.innerHTML = cmp[prop];
					divFieldValue.appendChild(lbFieldValue);
					
					htmlTabDetails.push(createDiv([divFieldName, divFieldValue]));
				}
				
				htmlDetailTab[cmp.ID] = htmlTabDetails;
				
				var tabMenu = document.getElementById("tabMenu");
				var detailsTab = document.createElement("li");
				detailsTab.id = cmp.name;
				detailsTab.title = "Component Details";
				var hrefTab = document.createElement("a");
				hrefTab.href = "#";
				hrefTab.id = cmp.ID;
				hrefTab.innerHTML = cmp.name;
				hrefTab["onclick"] = changeWindow_JSEvent;
				detailsTab.appendChild(hrefTab);
				tabMenu.appendChild(detailsTab);
				
				changeWindow(cmp.ID);
			}
			
			function componentSelected(srcElement)
			{
				var rowIndex = findParentByTagName(srcElement, "TR").rowIndex; 
				selectedComponent = resultData[rowIndex-1];
			}
			
			function insertRows(beginIndex, endIndex)
			{
				for(var i = beginIndex; i < endIndex + 1; i++)
				{
					var row = tab.insertRow(i);
					var currentResult = null;
					var cellValues = null;

					if(i != 0)
					{
						currentResult = resultData[i-1];
						if(cmpType != "VALUE")
						{
							if(currentResult.bc == null)
								currentResult.bc = {"name": "NONE", "ID": generateID()};
							cellValues = [createInputField("rbReuse" + i, "reuse", "radio", "", null, "onchange", componentSelected_JSEvent), 
							              {"id": JSON.stringify(currentResult.component), "innerHTML": currentResult.component.name, "onclick": showComponentDetails}, 
							              {"id": null, "innerHTML": currentResult.lastUpdated, "onclick": null}, 
							              {"id": JSON.stringify(currentResult.bc), "innerHTML": currentResult.bc.name, "onclick": showBcDetails}, 
							              {"id": null, "innerHTML": currentResult.popularity, "onclick": null}];
						}
						else
							cellValues = [createInputField("rbReuse" + i, "reuse", "radio", "", null, "onchange", componentSelected_JSEvent), 
							              {"id": JSON.stringify(currentResult.criterion), "innerHTML": currentResult.criterion.name, "onclick": showCriterionDetails},
							              {"id": JSON.stringify(currentResult.caso), "innerHTML": currentResult.caso.name, "onclick": showCaseDetails},
							              {"id": JSON.stringify(currentResult.method), "innerHTML": currentResult.method.name, "onclick": showMethodDetails},
							              {"id": JSON.stringify(currentResult.value), "innerHTML": currentResult.value.stringResult, "onclick": showValueDetails},
							              {"id": JSON.stringify(currentResult.bc), "innerHTML": currentResult.bc.name, "onclick": showBcDetails}];
						
						if(selectedComponent == currentResult)
							cellValues[0].setAttribute("checked","checked");
					}
						
					for(var j = 0 ; j < columnsLabels.length; j++)
					{
						if(i != 0)
						{
							var cell = row.insertCell(j);
							if(j!= 0)
							{
								cell.innerHTML = cellValues[j].innerHTML;
								cell.id = cellValues[j].id;
								cell["onclick"] = cellValues[j].onclick; 
							}
							else
								cell.appendChild(cellValues[j]);
						}
						else
						{
							var cell = row.insertCell(j);
							cell.setAttribute("class","firstTableHeader");
							cell.innerHTML = columnsLabels[j];
						}
					}
				}
			}
			
			function createDiv(children)
			{
				var div = document.createElement("div");
				div.setAttribute("class", "inputNameAndField");
				
				for(var i = 0 ; i < children.length ; i++)
					div.appendChild(children[i]);
				
				return div;
			}
			
			function rowCountRangeChanged(srcElement)
			{
				var newFromRange = parseInt(srcElement.value);
				
				if(newFromRange > oldFromRange)
				{
					for(var i = newFromRange; i > oldFromRange; i--)
					{
						var currentRow = tab.rows[i];
						currentRow.parentNode.removeChild(currentRow);
					}				
				}
				else
					insertRows(newFromRange, oldFromRange);
				
				oldFromRange = newFromRange;
			}
			
			function rowCountChanged(srcElement)
			{
				var requestedCount = parseInt(srcElement.value);
				
				if(requestedCount > resultData.length)
				{
					showErrorMessage("The max number of rows are " + resultData.length + ". The value has been change to " + resultData.length);
					srcElement.value = resultData.length;
					requestedCount = parseInt(resultData.length);
				}
					
				if(requestedCount >= tab.rows.length)
					insertRows(tab.rows.length, requestedCount);
				else
				{
					for(var i = tab.rows.length -1; i > requestedCount ; i--)
					{
						var currentRow = tab.rows[i];
						currentRow.parentNode.removeChild(currentRow);
					}
				}
			}
			
			function rbClicked(srcElement)
			{
				var rbButtons = document.getElementsByName(srcElement.name);
				for(var i = 0 ; i < rbButtons.length ; i++)
				{
					var relatedElements = document.getElementsByName(rbButtons[i].defaultValue);
					for(var j = 0 ; j < relatedElements.length ; j++)
						relatedElements[j].setAttribute("disabled", "disabled");	
				}
				
				var relatedElements = document.getElementsByName(srcElement.defaultValue);
				for(var i = 0 ; i < relatedElements.length ; i++)
					relatedElements[i].disabled = false;
			}
			
			var legend = document.createElement("legend");
			legend.innerHTML = "Search Results";
			var htmlTabResult = [legend];
			
			var rbRowCount = createInputField("rbRowCount", "rowCount", "radio", "maxRowCount", null, "onchange", rbClicked_JSEvent);
			rbRowCount.setAttribute("checked","checked");
			firstDivChildren = [rbRowCount];
			var lbRowCount = document.createElement("label");
			lbRowCount.innerHTML = "Select number of row to be shown: ";
			firstDivChildren.push(lbRowCount);
			var tbxRowCount = createInputField("tbxRowCount", "maxRowCount", "text", resultData.length, "smallTextBox", "onchange", rowCountChanged_JSEvent);
			tbxRowCount["onkeypress"] = onlyNumbers;
			firstDivChildren.push(tbxRowCount);
			
			var secondDivChildren = [createInputField("rbRowCountRange", "rowCount", "radio", "rowCountRange", null, "onchange", rbClicked_JSEvent)]; 
			var lbRowCountRange = document.createElement("label");
			lbRowCountRange.innerHTML = "Select row range to be shown: ";
			secondDivChildren.push(lbRowCountRange);
			var tbxFromRange = createInputField("tbxFromRange", "rowCountRange", "text", 0, "smallTextBox", "onchange", rowCountRangeChanged_JSEvent);
			tbxFromRange.setAttribute("disabled","disabled");
			tbxFromRange["onkeypress"] = onlyNumbers;
			secondDivChildren.push(tbxFromRange);
			var lbToRange = document.createElement("label");
			lbToRange.innerHTML = " to ";
			secondDivChildren.push(lbToRange);
			var tbxToRange = createInputField("tbxToRange", "rowCountRange", "text", resultData.length, "smallTextBox", "onchange", rowCountChanged_JSEvent);
			tbxToRange.setAttribute("disabled","disalbed");
			tbxToRange["onkeypress"] = onlyNumbers;
			secondDivChildren.push(tbxToRange);
			
			tab = document.createElement("table");
			tab.setAttribute("id", new Date().getTime());
			tab.setAttribute("class", "sortable");
			tab.setAttribute("summary", "methodProperties");
			
			insertRows(0, resultData.length);
			
			var lastDiv = document.createElement("div");
			lastDiv.setAttribute("class", "inputNameAndField");
			var btnBack =  createInputField("btnBack", "", "button", "Back", null, "onclick", goPreviousPage);
			btnBack.setAttribute("class", "buttonStyle");
			var btnNext =  createInputField("btnNext", "", "button", "Next", null, "onclick", goNextPage);
			btnNext.setAttribute("class", "buttonStyle");
			lastDiv.appendChild(btnBack);
			lastDiv.appendChild(btnNext);
			
			htmlTabResult.push(createDiv(firstDivChildren));
			htmlTabResult.push(createDiv(secondDivChildren));
			htmlTabResult.push(tab);
			htmlTabResult.push(lastDiv);
			
			sorttable.makeSortable(tab);
			return htmlTabResult;
		}
		
		function chkChanged_JSEvent(oParameter)
		{
			updateComboBoxState(arguments[0].srcElement);
		}
				
		function updateComboBoxState(srcElement)
		{
			var relatedCbx = null;
			if(srcElement.id == "chkBusinessCase")
				relatedCbx = document.getElementById("cbxBusinessCases");
			else
				relatedCbx = document.getElementById("cbxDateRange");
					
			relatedCbx.disabled = !(srcElement.checked);
		}

		function createHtmlTabSearch(searchPageData)
		{
			function goNextPage(){changeWindow("result");}
			
			function changeSelectedOutput()
			{
				var cbxComponents = arguments[0].srcElement;
				selectedOutput = cbxComponents.options[cbxComponents.selectedIndex].value;
				selectedComponent = null;
			}
			
			var legend = document.createElement("legend");
			legend.innerHTML = "Search Filters";
			
			var firstDiv = document.createElement("div");
			firstDiv.setAttribute("class", "inputNameAndField");
			var lbComponents = document.createElement("label");
			lbComponents.innerHTML = "Please select the desired output:";
			var cbxComponents = document.createElement("select");
			cbxComponents.setAttribute("id", "cbxComponents");
			cbxComponents["onchange"] = changeSelectedOutput;
			
			var componentsTypes = searchPageData.componentTypes;
			for(var j=0; j < componentsTypes.length; j++)
			{
				cbxComponents.options.add(new Option(componentsTypes[j]));
				if(componentsTypes[j] == searchPageData.cmpType)
				{
					cbxComponents.selectedIndex = j;
					firstSelectedOutput = selectedOutput = componentsTypes[j];
				}
			} 
			
			firstDiv.appendChild(lbComponents);
			firstDiv.appendChild(cbxComponents);
			
			var secondDiv = document.createElement("div");
			secondDiv.setAttribute("class", "inputNameAndField");
			var lbSearch = document.createElement("label");
			lbSearch.innerHTML = "Please enter specific keywords to be searched for (optional): ";
			var tbxSearch =  createInputField("tbxSearch", "search", "text", "", "largeTextBox"); 
			secondDiv.appendChild(lbSearch);
			secondDiv.appendChild(tbxSearch);
			
			var thirdDiv = document.createElement("div");
			thirdDiv.setAttribute("class", "inputNameAndField");
			var chkBC =  createInputField("chkBusinessCase", "", "checkbox", "", null, "onchange", chkChanged_JSEvent);
			var lbBcFilter = document.createElement("label");
			lbBcFilter.innerHTML = "Filter by Business Case ";
			var cbxBusinessCases = document.createElement("select");
			cbxBusinessCases.setAttribute("id", "cbxBusinessCases");
			
			var bcs = searchPageData.businessCases;
			for(var j=0; j < bcs.length; j++)
			{
				var option = new Option(bcs[j].name);
				option.value = bcs[j].ID;
				cbxBusinessCases.options.add(option);
				if(searchPageData.currentBC.ID == bcs[j].ID)
					cbxBusinessCases.selectedIndex = j;
			}
			cbxBusinessCases.setAttribute("disabled", "disabled");
			
			thirdDiv.appendChild(lbBcFilter);
			thirdDiv.appendChild(chkBC);
			thirdDiv.appendChild(cbxBusinessCases);
			
			var forthDiv = document.createElement("div");
			forthDiv.setAttribute("class", "inputNameAndField");
			var chkDate =  createInputField("chkDateRange", "", "checkbox", "", null, "onchange", chkChanged_JSEvent);
			var lbDateFilter = document.createElement("label");
			lbDateFilter.innerHTML = "Filter by Date Range";
			var cbxDateRange = document.createElement("select");
			cbxDateRange.setAttribute("id", "cbxDateRange");
			
			var dateRange = searchPageData.dateRange;
			for(var j=0; j < dateRange.length; j++) 
				cbxDateRange.options.add(new Option(dateRange[j]));
			cbxDateRange.setAttribute("disabled", "disabled");
			
			forthDiv.appendChild(lbDateFilter);
			forthDiv.appendChild(chkDate);
			forthDiv.appendChild(cbxDateRange);
			
			var fifthDiv = document.createElement("div");
			fifthDiv.setAttribute("class", "inputNameAndField");
			var btnNext =  createInputField("btnNext", "", "button", "Next", null, "onclick", goNextPage);
			btnNext.setAttribute("class", "buttonStyle");
			fifthDiv.appendChild(btnNext);
			
			htmlTabSearch.push(legend);
			htmlTabSearch.push(firstDiv);
			htmlTabSearch.push(secondDiv);
			htmlTabSearch.push(thirdDiv);
			htmlTabSearch.push(forthDiv);
			htmlTabSearch.push(fifthDiv);
			
			return htmlTabSearch;
		}
		
		function changeWindow(tabName)
		{
			try
			{
				var tabData = null;
				var fieldset = document.getElementById("fsWindow");
				
				if(tabName == "search")
				{
					var searchPageData = dialogArguments;
					
					fieldset.title = "Specify Search Filters";
					
					if(htmlTabSearch.length == 0)
						htmlTabSearch = createHtmlTabSearch(searchPageData);
						
					tabData = htmlTabSearch;
					selectTab(document.getElementById("tabSearch"));
				}
				else if(tabName == "result")
				{
					if(htmlTabSearch.length > 0)
					{
						if(oldTabId == "tabSearch")
						{
							var search = document.getElementById("tbxSearch").value;
							var param = "&search=" + encodeURIComponent(search);
							param += "&component=" + encodeURIComponent(selectedOutput);
							param += "&parentMetID=" + transformJSON(dialogArguments["parentMetID"]);
							
							var dateRange = document.getElementById("cbxDateRange");
							var cbxBusinessCases = document.getElementById("cbxBusinessCases");

							if(!dateRange.disabled)
								param += "&dateRange=" + encodeURIComponent(dateRange.options[dateRange.selectedIndex].value);
							if(!cbxBusinessCases.disabled)
								param += "&bcID=" + transformJSON(cbxBusinessCases.options[cbxBusinessCases.selectedIndex].value);
							
							function handleRequest()
							{
								if(globalReq.readyState == 4 && globalReq.status == 200)
								{
									eval("var response = (" + globalReq.responseText + ")");
									htmlTabResult = createHtmlTabResult(response, selectedOutput);
								}
							}
							
							sendRequest(globalReq, "reuse", "loadResultData", handleRequest, param);
						}
						
						tabData = htmlTabResult;
						selectTab(document.getElementById("tabResult"));
					}
				}
				else if(tabName == "reuse")
				{
					if(selectedComponent != null)
					{
						function reuseModeSelected(oParameter)
						{
							var srcElement = arguments[0].srcElement;
							selectedReuseMode = srcElement.id;
						}
						
						function goPreviousPage(){changeWindow("result");}
						
						try
						{
							var legend = document.createElement("legend");
							legend.innerHTML = "Reuse Details";
							var firstDiv = document.createElement("div");
							firstDiv.setAttribute("class", "inputNameAndField");
							var lbReuse = document.createElement("label");
							lbReuse.setAttribute("id","lbReuse");
							firstDiv.appendChild(lbReuse);
							firstDiv.appendChild(document.createElement("br"));
							
							function appendRadioButton(rbID, text, parentElement, rbName, isChecked)
							{
								if(rbName == null)
									rbName = "reuseOption";
								
								var rb = createInputField(rbID, rbName, "radio", "", null, "onchange", reuseModeSelected);
								
								if(isChecked)
									rb.setAttribute("checked","checked");
								
								var rbText = document.createElement("label");
								rbText.innerHTML = text;
								parentElement.appendChild(rb);
								parentElement.appendChild(rbText);
								parentElement.appendChild(document.createElement("br"));
							}
							
							function createLastDiv()
							{
								var fifthDiv = document.createElement("div");
								fifthDiv.setAttribute("class", "inputNameAndField");
								var btnBack =  createInputField("btnBack", "", "button", "Back", null, "onclick", goPreviousPage);
								btnBack.setAttribute("class", "buttonStyle");
								var btnNext =  createInputField("btnNext", "", "button", "Finish", null, "onclick", importComponent);
								btnNext.setAttribute("class", "buttonStyle");
								fifthDiv.appendChild(btnBack);
								fifthDiv.appendChild(btnNext);
								
								return fifthDiv;
							}
							
							if(selectedOutput == "CRITERION")
							{
								if(reuseCriterionData.length == 0)
								{
									appendRadioButton("LINK", "Link to the criterion (changes in the linked criterion will be announced in your business case, you will have the option to update your criterion accordingly or to discard any changes)", firstDiv);
									appendRadioButton("COPY", "Copy the criterion (changes in the original criterion will not be reflected in your business case)", firstDiv);
									
									reuseCriterionData.push(legend);
									reuseCriterionData.push(firstDiv);
									reuseCriterionData.push(createLastDiv());
								}
								
								getChildElementByProperty(reuseCriterionData[1], "id", "lbReuse").innerHTML = "How would you like to reuse Criterion '" + selectedComponent.component.name + "'?";
								tabData = reuseCriterionData;
								
								function handleLoadValues()
								{
									if (globalReq.readyState == 4 && globalReq.status == 200) 
								    {
								     	eval("var response = ("+globalReq.responseText+")");
								     	if(response != null && response != "ERROR")
								     	{
								     		function valueSelected()
								     		{
								     			var srcElement = arguments[0].srcElement;
								     			selectedComponent.component["values"][srcElement.id] = JSON.parse(srcElement.defaultValue);
								     		}
								     		
								     		var rbText = document.createElement("label");
											rbText.innerHTML = "The selected criterion has the following mapped values to the cases in your BC. Please chose the values to be reused or click finish to reuse only the criterion.";
											var table = document.createElement("table");
											table.setAttribute("class", "sortable");
											
											var firstLine = ["Parameter"];
											var secondLine = [selectedComponent.component.name];
											for(var casID in response)
								     		{
								     			firstLine.push(response[casID].caso.name);
								     			secondLine.push(response[casID]);
								     		}
											
											for(var row = 0 ; row < 2 ; row++)
											{
												var currentRow = table.insertRow(row);
												for(var cell = 0 ; cell < firstLine.length ; cell++)
												{
													var currentCell = currentRow.insertCell(cell);
													if(row == 0)
													{
														currentCell.innerHTML = firstLine[cell];
														currentCell.setAttribute("class", "firstTableHeader");	
													}
													else if(cell != 0)
													{
														var rbValueText = document.createElement("label");
														rbValueText.innerHTML = secondLine[cell].value.stringResult; 
														var rbValue = createInputField(secondLine[cell].caso.ID, "value", "checkbox", JSON.stringify(secondLine[cell]), null, "onchange", valueSelected);
														currentCell.appendChild(rbValue);
														currentCell.appendChild(rbValueText);	
													}
													else
														currentCell.innerHTML = secondLine[cell];
												}
											}	
										}
								     		
							     		selectedComponent.component["values"] = {};
							     		tabData.push(rbText);
							     		tabData.push(table);
								    }
								}
								
								var param = "&param=" + transformJSON(selectedComponent.component.ID);
								param += "&parentMetID=" + transformJSON(dialogArguments["parentMetID"]);
								sendRequest(globalReq, "reuse", "loadCriterionValues", handleLoadValues, param);
							}
							else if(selectedOutput == "METHOD")
							{
								if(reuseMethodData.length == 0)
								{
									appendRadioButton("LINK", "Link to the method and the value", firstDiv);
									appendRadioButton("COPY_METHOD_VALUE", "Copy the method and the value", firstDiv);
									appendRadioButton("COPY_METHOD", "Copy the method only", firstDiv);
									appendRadioButton("COPY_VALUE", "Copy the value only", firstDiv);
									
									reuseMethodData.push(legend);
									reuseMethodData.push(firstDiv);
									reuseMethodData.push(createLastDiv());
								}
								
								getChildElementByProperty(reuseMethodData[1], "id", "lbReuse").innerHTML = "How would you like to reuse Method '" + selectedComponent.component.name + "'?";
								tabData = reuseMethodData;
							}
							else if(selectedOutput == "VALUE")
							{
								if(reuseValueData.length == 0)
								{
									appendRadioButton("LINK", "Link to the value", firstDiv);
									appendRadioButton("COPY", "Copy the value", firstDiv);
									appendRadioButton("COPY_CALCULATION_METHOD", "Copy the value and the method that was used to calculate it", firstDiv);
									
									reuseValueData.push(legend);
									reuseValueData.push(firstDiv);
									reuseValueData.push(createLastDiv());
								}
								
								getChildElementByProperty(reuseValueData[1], "id", "lbReuse").innerHTML = "How would you like to reuse Value '" + selectedComponent.value.stringResult + "'?";
								tabData = reuseValueData;
							}
							else
							{
								if(reuseCaseData.length == 0)
								{
									lbReuse.innerHTML = "Where do you want to put the case?";
									firstDiv.appendChild(document.createElement("br"));
									appendRadioButton("NEW", "Insert it as a new column", firstDiv, "placeOption", (firstSelectedOutput != "CASE"));
									appendRadioButton("REPLACE", "Overwrite the name of the current column ('name of current case')", firstDiv, "placeOption", (firstSelectedOutput == "CASE"));
									firstDiv.appendChild(document.createElement("br"));
									var lb = document.createElement("label"); 
									lb.setAttribute("id","lbCaseReuse");
									lb.innerHTML = "How would you like to reuse Case '" + selectedComponent.component.name + "'?";
									firstDiv.appendChild(lb);
									firstDiv.appendChild(document.createElement("br"));
									appendRadioButton("LINK", "Link to the case", firstDiv);
									appendRadioButton("COPY", "Copy the case", firstDiv);
									
									reuseCaseData.push(legend);
									reuseCaseData.push(firstDiv);
									reuseCaseData.push(createLastDiv());
								}
								
								tabData = reuseCaseData;
								
								function handleLoadCaseValues()
								{
									if (globalReq.readyState == 4 && globalReq.status == 200) 
								    {
								     	eval("var response = ("+globalReq.responseText+")");
								     	if(response != null && response != "ERROR")
								     	{
								     		function valueSelected()
								     		{
								     			var srcElement = arguments[0].srcElement;
								     			selectedComponent.component["values"][srcElement.id] = JSON.parse(srcElement.defaultValue);
								     		}
								     		
								     		var rbText = document.createElement("label");
											rbText.innerHTML = "The selected case has the following mapped values to the criteria in your BC. Please chose the values to be reused or click finish to reuse only the case.";
											var table = document.createElement("table");
											table.setAttribute("class", "sortable");
											
											var firstLine = ["Parameter", selectedComponent.component.name];
											var otherLines = [];
											for(var crtID in response)
								     			otherLines.push(response[crtID]);
											
											for(var row = 0 ; row < otherLines.length ; row++)
											{
												var currentRow = table.insertRow(row);
												for(var cell = 0 ; cell < 2 ; cell++)
												{
													var currentCell = currentRow.insertCell(cell);
													if(row == 0)
													{
														currentCell.innerHTML = firstLine[cell];
														currentCell.setAttribute("class", "firstTableHeader");	
													}
													else if(cell != 0)
													{
														var rbValueText = document.createElement("label");
														rbValueText.innerHTML = otherLines[row].value.stringResult; 
														var rbValue = createInputField(otherLines[row].criterion.ID, "value", "checkbox", JSON.stringify(otherLines[row]), null, "onchange", valueSelected);
														currentCell.appendChild(rbValue);
														currentCell.appendChild(rbValueText);	
													}
													else
														currentCell.innerHTML = otherLines[row].criterion.name;
												}
											}	
										}
								     		
							     		selectedComponent.component["values"] = {};
							     		tabData.push(rbText);
							     		tabData.push(table);
								    }
								}
								     		
								var param = "&param=" + transformJSON(selectedComponent.component.ID);
								param += "&parentMetID=" + transformJSON(dialogArguments["parentMetID"]);
								sendRequest(globalReq, "reuse", "loadCaseValues", handleLoadCaseValues, param);
							}
							
							selectTab(document.getElementById("tabReuse"));
						}
						catch(ex)
						{
							showErrorMessage("There was a problem while trying to generate the reuse tab content. See console for details.", "Javascript Error");
							console.log(ex);
						}
					}
					else
						showErrorMessage("Please select a component to be reused in the result tab.", "Validation Error: No Component Selected");
				}
				else
				{
					if(htmlDetailTab[tabName] != null)
						tabData = htmlDetailTab[tabName]; 
					
					selectTab(findParentByTagName(document.getElementById(tabName), "LI"));
				}
				
				if(tabData != null)
				{
					while(fieldset.firstChild)
						fieldset.removeChild(fieldset.firstChild);
					for(var i = 0 ; i < tabData.length ; i++)
						fieldset.appendChild(tabData[i]);	
				}
			}
			catch(ex)
			{
				showErrorMessage("There was a problem while trying to show the page and the action couldn't be completed.", "Javascript Error");
			}
		}
		</script>
		<style type="text/css">
		
		.inputNameAndField
		{
			display:block;
			border:0px solid;
			padding:0px;
			width:600px;
			clear:all;
		}
		
		.inputFieldName
		{
			width:100px;
			border:0px solid;
			margin:0px;
			padding:0px;
			float:left;
		}

		.inputField
		{
			float:left;
			border:0px solid;
			width:500px;
			margin:0px;
			padding:0px;
		}

		</style>
	</head>
	<body onload="changeWindow('search')" style="width:700px;">
		<div id="header">
		  <ul id="tabMenu">
		    <li id="tabSearch" title="Specify Search Filters">
		    	<a href="#" onClick="changeWindow('search')">Search</a>
	    	</li>
	    	<li id="tabResult" title="Show Available Components">
		    	<a href="#" onClick="changeWindow('result')">Results</a>
	    	</li>
		    <li id="tabReuse" title="Show Chosen Components">
		    	<a href="#" onClick="changeWindow('reuse')">Reuse</a>
	    	</li>
		  </ul>
		</div> 
     	<div id="preview" class="sapUiBody" >
			<form id="frMain" title="Main Form" action="reuse" method="post">
	 			<fieldset title="Specify Search Filters" id="fsWindow">
	 			</fieldset>
	 		</form>	
      	</div>
       	<%@include file="/webPages/_footer.jsp" %>
	</body>
</html>